<template>
  <XnDialog custom-class="add-account-dialog" title="添加常设机构" :visible.sync="selfVisible" @close="closeDialog">
    <el-form ref="accountForm" :model="accountForm" :rules="rules" label-position="top" size="small">
      <el-scrollbar>
        <el-form-item label="机构名称" prop="orgName">
          <el-input
            v-model="accountForm.orgName"
            type="textarea"
            placeholder="请输入"
            maxlength="150"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="机构简称" prop="orgAlias">
          <el-input
            v-model="accountForm.orgAlias"
            type="textarea"
            placeholder="请输入"
            maxlength="150"
            show-word-limit></el-input>
        </el-form-item>
        <!-- <el-form-item label="机构类型" prop="orgType">
          <el-select v-model="accountForm.orgType" placeholder="请选择" filterable>
            <el-option v-for="item in orgTypeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="政府类型" prop="governmentType">
          <el-select v-model="accountForm.governmentType" placeholder="请选择" filterable>
            <el-option
              v-for="item in governmentTypeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行政区划" prop="districtLevel">
          <el-select v-model="accountForm.districtLevel" placeholder="请选择" filterable>
            <el-option
              v-for="item in districtLevelList"
              :key="item.code"
              :label="item.name"
              :value="item.code"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="上级机构" prop="pid">
          <OrganTreeSelect
            v-model="accountForm.pid"
            :is-show="selfVisible"
            :tenantId.sync="accountForm.tenantId"></OrganTreeSelect>
        </el-form-item>
        <el-form-item label="机构地址" prop="orgAddress">
          <el-input
            v-model="accountForm.orgAddress"
            type="textarea"
            placeholder="请输入"
            maxlength="150"
            show-word-limit></el-input>
        </el-form-item>
        <!-- <el-form-item label="页面说明" prop="name">
              <el-input v-model="accountForm.name" placeholder="请输入"></el-input>
            </el-form-item> -->
        <el-form-item label="机构职能" prop="orgFunction">
          <el-input
            type="textarea"
            v-model="accountForm.orgFunction"
            placeholder="请输入"
            maxlength="500"
            show-word-limit></el-input>
        </el-form-item>
      </el-scrollbar>
      <div class="btn-box">
        <el-button size="small" @click.stop="closeDialog">取消</el-button>
        <el-button size="small" type="primary" @click.stop="onFormSave">确定</el-button>
      </div>
    </el-form>
  </XnDialog>
</template>
<script>
import XnDialog from '@com/xnDialog.vue'
import { listCodeData, getUiasOrgan } from '@api/modules/system.js'
import { cloneDeep } from 'lodash'
import OrganTreeSelect from '@com/OrganTreeSelect.vue'

export default {
  name: 'LogDialog',
  components: { XnDialog, OrganTreeSelect },
  emits: ['close', 'submit'],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      selfVisible: false,
      accountForm: {
        status: 1,
        tenantId: '',
        governmentType: '11',
        pid: null,
        orgType: '0210',
        districtLevel: '20',
      },
      rules: {
        orgName: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
        orgAlias: [{ required: true, message: '请选择机构简称', trigger: 'blur' }],
        orgType: [{ required: true, message: '请选择机构类型', trigger: 'change' }],
        governmentType: [{ required: true, message: '请选择政府类型', trigger: 'change' }],
        districtLevel: [{ required: true, message: '请选择行政区划', trigger: 'change' }],
        tenantId: [{ required: true, message: '请选择租户', trigger: 'change' }],
      },
      roleList: [],
      editPass: false,
      postLevelList: [],
      orgTypeList: [],
      governmentTypeList: [],
      districtLevelList: [],
    }
  },
  watch: {
    visible(bool) {
      this.selfVisible = bool
      if (bool) {
        this.onAddEdit(this.info)
      }
    },
  },
  computed: {
    isEdit() {
      return this.info && this.info.id
    },
  },
  methods: {
    closeDialog() {
      this.$refs.accountForm && this.$refs.accountForm.resetFields()
      this.selfVisible = false
      this.editPass = false
      this.accountForm = {
        status: 1,
        tenantId: '',
        governmentType: '11',
        pid: null,
      }
      this.$emit('close', false)
      this.$emit('update:visible', false)
    },
    onFormSave() {
      this.$refs.accountForm.validate(valid => {
        if (valid) {
          const emitData = cloneDeep(this.accountForm)
          if (!emitData.pid || emitData.pid === '-1') {
            emitData.orgType = '0210'
            emitData.districtLevel = '20'
          } else {
            emitData.orgType = '0211'
            emitData.districtLevel = '30'
          }
          emitData.governmentType = '11'
          // console.log('object :>> ', emitData)
          this.$emit('submit', emitData)
          this.closeDialog()
        }
      })
    },
    /* 初始化参数配置 */
    initListCodeDatadata(codeType) {
      listCodeData(codeType).then(res => {
        if (res.status === 200) {
          if (codeType === 'org_type') {
            this.orgTypeList = res.data
          } else if (codeType === 'government_type') {
            this.governmentTypeList = res.data
          } else if (codeType === 'district_level') {
            this.districtLevelList = res.data
          }
        }
      })
    },
    /* 创建编辑 */
    onAddEdit(data) {
      this.initListCodeDatadata('org_type')
      this.initListCodeDatadata('government_type')
      this.initListCodeDatadata('district_level')
      if (this.$refs.accountForm) {
        this.$refs.accountForm.resetFields()
      }
      this.$set(this.accountForm, 'id', '')
      if (data.isAddNext) {
        this.$set(this.accountForm, 'pid', data.id)
      } else {
        if (data.id) {
          /* 查询详情 */
          getUiasOrgan({ id: data.id }).then(res => {
            if (res.status === 200) {
              this.accountForm = { ...this.accountForm, ...res.data }
              // this.accountForm.governmentType = res.data.districtLevel.substr(0, 2)
              // this.accountForm.districtLevel = res.data.districtLevel.substr(2, 4)
              console.log('object :>> ', this.accountForm)
            }
          })
        }
      }
    },
    onChangeTenantId() {
      this.accountForm.pid = null
    },
  },
}
</script>
<style lang="scss" scoped>
.add-account-dialog {
  ::v-deep &.el-dialog {
    width: 800px;
    .el-scrollbar {
      max-height: 50vh;
      overflow: hidden scroll;
      height: 100%;
    }

    .el-form {
      .row-item {
        width: 100%;
        display: flex;
        align-items: center;

        .col-item {
          width: 50%;
          margin-right: 20px;
          position: relative;

          &:last-of-type {
            margin-right: 0px;
          }
        }
      }

      .el-input,
      .el-select {
        width: 100%;
      }

      .pwd-eye-view {
        cursor: pointer;
        margin-top: 8px;
        display: inline-block;
      }

      .btn-box {
        text-align: right;
        margin-top: 20px;
        border-top: 1px solid #dedede;
        padding-top: 20px;
      }
    }
  }
}
</style>
<style lang="scss">
.el-popover {
  &.password-tips-popover {
    .password-tip-con {
      .tips-title {
        font-size: 15px;
        list-style: 24px;
        margin-bottom: 10px;
        color: #333;
      }

      .tips-con {
        font-size: 13px;
        list-style: 20px;
        margin-bottom: 5px;
        color: #666;
      }
    }
  }
}
</style>
